const Student = {
    '30' : '吴杨',
    '31' : '吴志浩',
    '32' : '丁洪宇',
    '33' : '佘文辉',
    '34' : null,
    '35' : '黄柄权',
    '36' : '马锐',
    '37' : '喻文希',
    '38' : '兰天盟',
    '39' : '徐心念',
    '40' : '夏思妮',
    '41' : '胡文杰',
    '42' : '毛徐东',
    '43' : '李梦玲',
    '44' : '邓彧',
    '45' : '李博',
    '46' : '张瑶',
    '47' : '杨文杰',
    '48' : '廖朋林',
    '49' : '方潇',
    '50' : null,
    '51' : '万俊辉',
    '52' : '陈梓琪',
    '53' : '吴婉',
    '54' : '胡梓航',
    '55' : '刘文谦',
    '56' : '李飞',
    '57' : '乐涛',
    '58' : '李春雨'
};
$(function() {
    // 获取总学号
    let StudentId = [];
    for(let temp in Student) {
        StudentId.push(temp);
    }
    $('#query').on('click', ()=> {
        let yes = [];
        let no = [];
        let cont = 0;
        // 收集已交名单
        let str = $('#data').val();
        yes = str.split(',');
        yes = unique1(yes);
        yes = yes.sort();
        // console.log(yes);
        
        // 渲染已交名单
        // $.each(yes, (index, elementId)=> {
        //     if(elementId >= 30 && elementId <= 58) {
        //         $('#yesList').append(`<tr><td>${elementId}</td><td>${Student[elementId]}</td></tr>`);
        //     }
        // });
        RenderElements(yes,1);
        // 获取已交人数 且 渲染
        // let okPerson = yes.length;
        // $('#okPerson').append(`已交：${okPerson}人!`);

        // 收集未交名单 
        for(let i = 0; i < StudentId.length; i++) {
            if(yes.indexOf(StudentId[i]) === -1) {
                no.push(StudentId[i]);
            }
        }
        // console.log(no);
        // 渲染未交名单
        // $.each(no,(index, element)=> {
        //     $('#noList').append(`<tr><td>${element}</td><td>${Student[element]}</td></tr>`);
        // });

        RenderElements(no,2);
        // 获取未交人数 且 渲染
        // let noPerson = no.length;
        // $('#noPerson').append(`未交：${noPerson}人！`);
    });
    // 清除节点
    Reset();
});

// 去重·
function unique1(arr) {
    var n = []; //一个新的临时数组
    for(var i = 0; i < arr.length; i++){ //遍历当前数组
        if (n.indexOf(arr[i]) == -1){
            n.push(arr[i]);
        }
    }
    return n;
}


// 渲染
function RenderElements(target,id) {
    // id值为1 就渲染已交
    // id值为2 就渲染未交
    let length = target.length;
    let cont = 0;
    if(id == 1) {
        // 开始渲染
        $.each(target, (index, elementId)=> {
            if(elementId >= 30 && elementId <= 58) {
                $('#yesList').append(`<tr><td>${elementId}</td><td>${Student[elementId]}</td></tr>`);
            }
            else {
                // 如果不成立 的人数 不能算  
                // 已交人数 = length = length - cont
                // 未交人数 = length = 总人 - 已交ength
                cont++;
            }
        });
        // 渲染已交人数
        $('#okPerson').append(`已交：${length-cont}人!`);
        $('#noPerson').append(`未交：${28 - length}人!`);
    }else if(id == 2) {
        // // 开始 渲染
        $.each(target,(index, element)=> {
            $('#noList').append(`<tr><td>${element}</td><td>${Student[element]}</td></tr>`);
        });
    }
}
// 重置  恢复出厂设置
function Reset() {
    $('#del').on('click', ()=> {
        $('#yesList').empty();
        $('#noList').empty();
        $('#okPerson').empty();
        $('#noPerson').empty();
        $('#data').val('');
    });
}
